<template>
  <v-select-table-page v-model="customValue" :api="customUrl" :responseData="responseData" :showValue="showValue" :showValueShow="showValueShow"
                       :column="column" :multiple="multiple" :showHeader="showHeader" :searchKeyword="searchKeyword"
                       :clickValue="clickValue" :queryValue="localQueryValue" ref="SelectProjectTeam" v-bind="$attrs"
                       @selectChange="selectChange" :disabled="disabled"></v-select-table-page>
</template>

<script>
import vSelectTablePage from '@/components/element/vSelectT/vSelectTablePage'
import projectTeamApi from '@/api/projectTeamApi.js'
export default {
  name: "SelectProjectTeam",
  components: {
    vSelectTablePage
  },
  props: {
    showValueShow: {
      type: [String, Object, Array],
      default: function () {
        return undefined
      }
    },
    size: {
      type: [String],
      default: function () {
        return 'small'
      }
    },
    disabled: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    searchKeyword: {
      type: [String],
      default: function () {
        return 'keyword'
      }
    },
    responseData: {
      type: [String],
      default: function () {
        return 'Teams'
      }
    },
    showValue: {
      type: [String],
      default: function () {
        return 'Userrealname'
      }
    },
    value: {
      type: [String, Number, Array],
      default: function () {
        return undefined
      }
    },
    column: {
      type: [Array, Object, String],
      default: function () {
        return [
          {
            field: 'Userrealname'
          }
        ]
      }
    },
    multiple : {
      type: Boolean,
      default: function () {
        return false
      }
    },
    showHeader: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    clickValue: {
      type: [String, Array],
      default: function () {
        return 'Userid'
      }
    },
    queryValue: {
      type: Object,
      default: function () {
        return {
          id: this.$route.params.id,
        }
      }
    },
    url: {
      type: Object,
      default: function () {
        return undefined
      }
    }
  },
  data () {
    return {
      parsentParms: {},
      localQueryValue: Object.assign({ id: this.$route.params.id }, this.queryValue),
      projectTeamApi: projectTeamApi
    }
  },
  mounted () {
    this.$refs.SelectProjectTeam.getTableData()
  },
  computed: {
    customUrl () {
      return this.url || this.projectTeamApi
    },
    customValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
  },
  methods: {
    selectChange (value) {
      this.$emit('selectChanged', value)
    }
  },
  watch: {
    queryValue: {
      immediate: true,
      deep: true,
      handler (n, o) {
        if (JSON.stringify(n) !== this.parsentParms) {
          if (this.queryValue.hasOwnProperty('id') && this.queryValue.id) {
            this.localQueryValue = Object.assign({ id: this.$route.params.id }, this.queryValue)
            this.parsentParms = JSON.stringify(this.localQueryValue)
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
